<template>
    <div class="dashboard-container" v-loading="loading">
      <el-row class="list-menu">
        <el-button type="primary" @click="drawer = true">新增</el-button>
        <!-- <el-button type="warning">修改</el-button>
        <el-button type="danger">删除</el-button> -->
      </el-row>
  
      <el-card>
        <el-table
          :data="tableData.list"
          border
          style="width: 100%">
          <el-table-column
            prop="typeName"
            label="分类名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
            <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">

            <template slot-scope="scope">{{ scope.row.status == 'true' ? '启用': '禁用' }}</template>

          </el-table-column>
        </el-table>
        <!-- <div class="pagination">
          <div>显示第 {{tableData.Offset + 1}} 到第 {{(tableData.Offset + 10) > tableData.Total ? tableData.Total : (tableData.Offset + 10)}} 条记录，总共 {{tableData.Total}} 条记录</div>
          <el-pagination
              @current-change="currentChange"
              background
              :total="tableData.Total"
              layout="prev, pager, next"
              >
          </el-pagination>
        </div> -->
      </el-card>


      <el-drawer
        title="新增分类"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        
        <div class="add-type">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="名称" prop="typeName">
              <el-input v-model="form.typeName"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="80px" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="启用" :value="true"></el-option>
                <el-option label="禁用" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <el-button type="primary" class="drawer-bottom" @click="addGDType('form')">确认</el-button>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import { mapActions, mapGetters } from 'vuex'
  import {parseTime} from '@/utils/index';
  import request from '@/utils/request';
  export default {
    name: 'Dashboard',
    data() {
      this.parseTime = (d)=> parseTime(d)
      return {
        tableData: [],
        drawer: false,
        direction: 'rtl',
        loading: true,
        form: {

        },
        rules: {
          typeName:[{ required: true, message: '请输入分类名称', trigger: 'blur' }],
          status: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        },

      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList() {
        request.get(`/ad-group`).then((res)=> {
          this.tableData = res.data;
          this.loading = false;
        })
      },
      handleClose(done) {
        done();
      },
      addGDType(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.form.createTime = new Date().getTime();
            request.get('/ad-group/add', {
              params: _this.form
            }).then((res)=> {
              if(res.code == 200) {
                _this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                _this.drawer = false;
                _this.getList();
              }
            })
          }
        });
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .drawer-bottom{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  .add-type{
    padding: 20px;
  }
  .list-menu{
    margin-bottom: 40px;
  }
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  